<template>
  <div>
    <a-drawer
      class="_form"
      title="图标选择"
      :width="600"
      :maskClosable="false"
      :visible="visible"
      @close="visible = false"
    >
      <ul class="anticons-list">
        <li v-for="(item,index) in iconList" :key="index" @click="pick(item)">
          <i v-if="item.includes('icon-')" class="iconfont" :class="item" />
          <a-icon v-else :type="item" />
        </li>
      </ul>
      <div class="drawer-bottom">
          <a-button class="nbcs-btn nbcs-btn-gray" @click="visible = false">
            取消
          </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import {iconList} from '@/styles/antd-icon';
export default {
  name: "IconList",
  components: {},
  data() {
    return {
      visible: false,
      data: [],
      showAddForm: false,
      iconList
    };
  },
  created() {
    this.$bus.$on("iconListVisible", (val) => {
      this.visible = val.state;
    });
  },
  methods: {
    pick(item){
      this.visible = false;
      this.$emit('pickIcon',{name:item});
    },

  },
  destroyed() {
    this.$bus.$off("iconListVisible");
  },
};
</script>
<style lang="less" scoped>
ul.anticons-list{
  margin: 10px 0;
  list-style: none;
  overflow: hidden;
  padding: 0;
  li{
    float: left;
    width: 12.5%;
    text-align: center;
    list-style: none;
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    position: relative;
    margin: 3px 0 10px 0;
    background-color: #fff;
    overflow: hidden;
    color:#555;
    font-size: 22px;
    &:hover{
      i{
        transition:all 0.2s;
        transform: scale(1.4);
      }
    }
  }
}
</style>
